<template>
    <view class="userLoginFrom">
        <view class="card">
            <image :src="storageImg" class="logo" @click="imgClick" />
            <view>{{ lUserName }}</view>
        </view>
        <button @click="loginOut">退出登录</button>
    </view>
</template>

<script setup>
    import { ref } from 'vue'
    import { onLoad } from '@dcloudio/uni-app'
    
   
    let storageImg = ref('')

    // let headImage = ref(storageImg.value || '/static/bug.svg')
    let lUserName = ref((uni.getStorageSync('loginUserName')) || '游客')

    function loginOut() {
        uni.removeStorageSync('loginUserName')
        uni.removeStorageSync('isLogin')
        uni.removeStorageSync('saveHeadImage')
        uni.clearStorageSync()
        uni.reLaunch({
            url: '/pages/login/login'
        })
    }

    function imgClick() {
      uni.chooseImage({
        count: 1,
        success(res) {
          const tempPath = res.tempFilePaths[0];
          uni.saveFile({
            tempFilePath: tempPath,
            success(saveRes) {
              const savedPath = saveRes.savedFilePath;
              storageImg.value = savedPath;
              uni.setStorageSync('saveHeadImage', savedPath);
            },
            fail(err) {
              console.error('保存头像失败', err);
            }
          });
        }
      });
    }

     onLoad(
        () => {
            storageImg.value = uni.getStorageSync('saveHeadImage') || '/static/bug.svg'
            console.log(storageImg.value);
        }
    )
</script>

<style lang="scss" scoped>
.userLoginFrom {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  background: #f3f8ff;
  padding: 20rpx 40rpx 0 40rpx;
  box-sizing: border-box;
}

/* 卡片 */
.card {
  width: 100%;
  max-width: 520rpx;
  padding: 80rpx 48rpx;
  background: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(127, 184, 255, 0.2);
  text-align: center;
}

/* 圆形居中头像 */
.logo {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  object-fit: cover;
  border: 6rpx solid #7bb8ff;
  margin-bottom: 32rpx;
}

/* 用户名 */
view {
  font-size: 36rpx;
  color: #333;
  font-weight: 500;
}

/* 退出按钮 */
button {
  margin-top: 80rpx;
  width: 100%;
  max-width: 520rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: #7bb8ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 12rpx;
  border: none;
}
button:active {
  background: #4096ff;
}
</style>